
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
            box-sizing: border-box;
            margin: 0;
            padding: 0;

        }
        .slider{
            width: 560px;
            height: 500px;
        }
        .slider-wrapper{
            width: 100%;
            height: 500px;
        }
        .slider-wrapper img{
            width: 560px;
            height: 500px;
            display: block;
        }
        .slider-footer{
            width: 560px;
            height: 80px;
            background-color: rgba(100,67,68);
            padding: 12px 12px 0 12px;
            position: relative;
        }
        .toggle{
            position:absolute;
            display: flex;
            right: 0;
            top: 12px;
        }
        .slider-footer p{
            margin: 0;
            margin-bottom: 10px;
            color:white;
            font-size: 18px;
        }
        .toggle button{
            margin-right: 12px;
            background-color: gray;
            opacity: 0,1;
            width: 28px;
            height: 28px;
            border: none;
            appearance: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .toggle button:hover{
            background-color: bisque;
            opacity: 0,2;
        }
        .ljw{
            display: flex;
            align-items: center;
        }
         .ljw li{
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: white;
            opacity: 0.4;
            cursor: pointer;
        }
        .ljw .active{
            background: white;
            opacity: 1;
            width: 12px;
            height: 12px;
        }

    </style>
</head>
<body>
    <div class="slider">
         <div class="slider-wrapper"><img src="./曼城.jpg"></div>
    
        <div class="slider-footer">
        <p>曼城</p>
         <ul class="ljw">
         <li class="active"></li>
        <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
        <li></li>
        </ul>
         <div class="toggle">
         <button class="prev">&lt;</button>
         <button class="next">&gt;</button>
        </div>
        </div>
        </div>
        <script>
            const sliderData = [
                                {url:'./曼城.jpg', title:'曼城？',color:'rgb(100,67,68)'},
                                {url:'./切尔西.jpg', title:'切尔西！！！',color:'#ff9ff3'},
                                {url:'./曼联.jpg', title:'曼联！',color:'#ff9ff3'},
                                {url:'./阿森纳.jpg', title:'阿森纳？？？',color:'rgb(67,90,92)'},
                                {url:'./皇马.jpg', title:'皇马！',color:'rgb(166,131,143)'},
                                {url:'./巴萨.jpg', title:'巴萨？',color:'rgb(53,29,25)'},
                                {url:'./利物浦.jpg', title:'利物浦！',color:'#1dd1a1'},


                            ]  
                            const img =document.querySelector('.slider-wrapper img')
                            const p = document.querySelector(`.slider-footer p`)
                            const prev =document.querySelector(`.prev`)
                            const next = document.querySelector(`.next`)
                            const ys =document.querySelector(`.slider-footer`)
                            let i = 0
                            next.addEventListener('click',function () {
                                i++
                                if (i>=sliderData.length) {
                                    i=0
                                }
                                toggle()
                            })
                            prev.addEventListener('click',function () {
                                i--
                                if (i<0) {
                                    i=6
                                }
                                toggle()
                            })
                            function toggle() {
                                img.src = sliderData[i].url
                                p.innerHTML=sliderData[i].title
                                ys.style.backgroundColor= sliderData[i].color
                                document.querySelector(`.ljw .active`).classList.remove(`active`)
                                document.querySelector(`.ljw li:nth-child(${i+1})`).classList.add(`active`)
                            }
                            let time = setInterval(function () {
                                next.click()
                            },1000)
                            const box = document.querySelector(`.slider`)
                            box.addEventListener('mouseenter',function () {
                                clearInterval(time)
                            })
                            box.addEventListener('mouseleave',function () {
                                clearInterval(time)
                                time = setInterval(function () {
                                next.click()
                            },1000)
                                
                            })
        </script>
</body>
</html>